<template>
  <div class="container">
    <van-nav-bar left-arrow @click-left="goBack" :border="false" />
    <div class="title">短信登录</div>
    <!-- 登录表单 -->
    <van-form ref="loginForm" @submit="onSubmit">
      <!-- autocomplete="off" 关闭输入框的提示（原生属性） -->
      <van-field
        v-model="mobile"
        name="mobile"
        placeholder="请输入手机号"
        autocomplete="off"
        type="number"
        maxlength="11"
        :rules="[
          {
            pattern: pattern4tel,
            required: true,
            message: '请填写正确的手机号',
          },
        ]"
      />
      <van-field
        v-model="code"
        name="code"
        placeholder="请输入验证码"
        autocomplete="off"
        type="number"
        maxlength="6"
        :rules="[
          {
            pattern: pattern4code,
            required: true,
            message: '请填写正确的验证码',
          },
        ]"
      >
        <template #button>
          <!-- 验证码按钮 -->
          <van-button
            v-if="!isCountDownShow"
            size="small"
            type="primary"
            class="send-btn"
            native-type="button"
            @click="onSend"
          >
            发送验证码
          </van-button>
          <!-- 倒计时 -->
          <van-count-down
            v-else
            format="ss s"
            :time="1000 * 6"
            @finish="isCountDownShow = false"
          />
        </template>
      </van-field>
      <div style="margin: 16px">
        <!-- 登录按钮 -->
        <van-button
          :loading="loading"
          block
          type="info"
          native-type="submit"
          class="login-btn"
          @click="onSubmit"
          color="linear-gradient(-45deg, rgb(255, 100, 0), rgb(255, 40, 0))"
        >
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import * as login from "@/api/login";
export default {
  data() {
    return {
      mobile: localStorage.getItem("mobile") || "",
      code: "",
      loading: false,
      isCountDownShow: false,
      //手机号正则
      // ^匹配开始
      // $匹配结束
      // \d数字
      pattern4tel: /^1[3|5|7|8]\d{9}$/,
      pattern4code: /^\d{6}$/,
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    // 发验证码
    async onSend() {
      // 发送请求
      const res = await login.getCodeInfo(this.mobile);
      // 验证码通过，显示倒计时
      if (res) {
        this.isCountDownShow = true;
      }
      this.$notify({
        type: res ? "success" : "danger",
        message: res || "发送失败",
      });
    },

    // 登录发请求
    onSubmit() {
      this.loading = true;
      login.getLoginInfo(this.mobile, this.code)
        .then((res) => {
          //记录手机号
          localStorage.setItem("mobile", this.mobile);
          // 记录token
          localStorage.setItem("token", res.data.token);
          // localStorage.setItem('token', res.data.refresh_token || res.data.token);
          this.$notify({
            type: "success",
            message: res.message,
          });
          this.goBack();
        })
        .catch(() => {
          this.$notify({
            type: "danger",
            message: "发送失败",
          });
        })
        // 不管成功还是失败都会走
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  margin: 0;
  padding: 4px 8px;
  .title {
    padding-left: 16px;
    font-size: 20px;
    margin: 20px 0 40px 0;
  }

  .send-btn {
    background-color: #fff;
    color: #999;
    border: none;
  }
  .login-btn {
    border: none;
  }
}
</style>